<template>
  <div ref="chart" style="width: 98%;min-width:360px ;height: 300px;"></div>
</template>
<script>
  import dashboardAPI from '@/api/dashboard/dashboard'
  import {
    EmptyChart
  } from '@/views/components/chart'
  import {
    codeByType
  } from '@/views/device/common'
  export default {
    name: 'DeviceCountChart',
    mixins: [EmptyChart],
    data() {
      const vm = this
      return {
        chartOption: {
          title: {
            text: vm.$t('chart.DeviceCount'),
            left: 'center'
          },
          tooltip: {
            show: true
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {
            type: 'value'
          }
        },
        list: []
      }
    },
    created() {
      const vm = this
      setTimeout(() => {
        vm.queryData()
      }, 100);
    },
    methods: {
      queryData() {
        const vm = this
        dashboardAPI.deviceCount().then(res => {
          vm.list = res.data.map(item => {
            return {
              name: vm.$t('dictionary.' + codeByType(item.name)),
              value: item.value
            }
          })
          vm.updateChart()
        })
      },
      createOption() {
        const data = []
        const category = []
        const {
          list
        } = this
        for (var i = 0; i < list.length; i++) {
          const item = list[i]
          const {
            value,
            name
          } = item
          category.push(name)
          data.push({
            name,
            value
          })
        }
        return {
          xAxis: {
            data: category
          },
          series: {
            type: 'bar',
            data
          }
        }
      }
    }
  }

</script>
